<template>
  <md-nav-bar title="个人信息" backgroundColor="#ffffff" />
  <view class="user-info-page">
    <view class="list">
      <view class="list-item img">
        <view class="left">头像</view>
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="image" :src="data.info?.avatar" mode="widthFix"></image>
        </button>
      </view>
      <view class="list-item">
        <view class="left">昵称</view>
        <view class="right" style="text-align: right">
          <input type="nickname" class="nick-input" placeholder="请输入昵称" v-model="data.info.nickname" />
        </view>
      </view>
      <view class="list-item">
        <view class="left">个人简介</view>
        <view class="right" style="text-align: right">
          <textarea auto-height placeholder="请输入个人简介" v-model="data.info.introduction" />
        </view>
      </view>
      <!-- <view class="list-item">
        <view class="left">手机号</view>
        <view class="right">
          {{ data.info?.mobile }}
        </view>
      </view>
      <view class="list-item">
        <view class="left">性别</view>
        <view class="right">
          {{ data.info?.sex == 1 ? '男' : '女' }}
        </view>
      </view> -->
    </view>
    <!-- 修改按钮 -->
    <button class="edit-btn" @click="onEdit">修改</button>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 接口
import api from '@/api';
import type { User } from '@/api/data';
// 工具
import { uploadToQiniu } from '@/api/util';
import { Toast } from '@/utils/util';

const data = reactive<{ info: Partial<User.Get.Data> }>({
  info: {}, // 用户信息
});

// 选择头像
const onChooseAvatar = (e: any) => {
  const { avatarUrl } = e.detail;
  uni.getFileInfo({
    filePath: avatarUrl,
    success: fileInfo => {
      handleUpload({ path: avatarUrl, size: fileInfo.size });
    },
  });
  // uni.downloadFile({ url: avatarUrl }).then(res => {
  //   if (res?.tempFilePath) {
      
  //   }
  // });
};

const onEdit = () => {
  if (!data.info?.nickname || !data.info?.avatar || !data.info?.introduction) {
    Toast('信息未填写完整！');
    return;
  }
  fetchUpdateInfo();
};

/**
 * 接口相关
 */
// 获取用户信息
const fetchGetUserinfo = async () => {
  try {
    const res = await api.User.get();
    data.info = res.data;
  } catch (e) {}
};

// 上传图片
const handleUpload = async (file: { path: string; size: number }) => {
  uni.showLoading({ title: '上传中...', mask: true });
  try {
    const res: any = await uploadToQiniu({ ...file, name: '头像', fileType: 'image/png' }, 'isong/member/user');
    if (res) {
      data.info.avatar = res.url;
    }
  } catch (e) {}
  uni.hideLoading();
};

// 修改信息
const fetchUpdateInfo = async () => {
  try {
    const res = await api.User.update({
      nickname: data.info?.nickname || '',
      avatar: data.info?.avatar || '',
      introduction: data.info?.introduction || '',
    });
    uni.showModal({
      title: '提示',
      content: '修改成功',
      showCancel: false,
      success: res => {
        if (res.confirm) {
          uni.navigateBack();
        }
      },
    });
  } catch (error) {}
};

onLoad(() => {
  fetchGetUserinfo();
});
</script>

<style lang="scss" scoped>
.user-info-page {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 60rpx;
}
.profile-row {
  display: flex;
  align-items: center;
  padding: 40rpx 0 0 40rpx;
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 4rpx solid #e0e0e0;
    background: #eee;
  }
  .nickname {
    font-size: 32rpx;
    color: #222;
    font-weight: 500;
    margin-left: 24rpx;
  }
}
.intro-card {
  margin: 40rpx 32rpx 0 32rpx;
  background: #e6e6e6;
  border-radius: 32rpx;
  padding: 32rpx 28rpx;
  .intro-title {
    font-size: 28rpx;
    color: #222;
    font-weight: 500;
    margin-bottom: 12rpx;
  }
  .intro-content {
    font-size: 26rpx;
    color: #222;
    line-height: 1.7;
    word-break: break-all;
  }
}
.list {
  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    .left {
      width: 200rpx;
    }
    &:not(:last-of-type) {
      margin-bottom: 20rpx;
    }
    font-size: 28rpx;
    color: $title;
    &.img {
      padding: 14rpx 20rpx;
    }
    .avatar-wrapper {
      border: none;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .image {
      width: 90rpx;
      height: 90rpx;
    }
  }
}
.edit-btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 40rpx;
  height: 90rpx;
  background: #006a53;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  text-align: center;
  line-height: 90rpx;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
</style>
